<template>
	<container
		class="goods-type-list"
		:isNoData="isNodata"
		:isLoading="loading"
		@btnClick="init"
		:nodataOption="{
			type: 'hasbtn',
			iconBottom: '40rpx',
			text: '无数据',
			btnText: '刷新'
		}"
	>
		<wyb-tabs class="tabs" :tabs="tabs" :s-block-mode="'fixed'" :s-block-width="'50%'" :active-color="'#E9C846'" @change="tabChange" />
		<mescroll-uni
			class="scroll"
			ref="mescrollRef"
			@init="mescrollInit"
			top="80"
			@down="downLoad"
			:down="{
				auto: false
			}"
			:up="{
				auto: false,
				textNoMore: '没有更多'
			}"
			@up="upLoad"
		>
			<!-- <scroll-view class="scroll" :scroll-y="true" @scrolltolower="goodListReachBottom"> -->
			<view class="good-list">
				<navigator
					class="item"
					:url="'/pages/goods/good-detail?id=' + item.commodityId + '&name=' + item.commodityName"
					hover-class="none"
					:key="item.commodityId"
					v-for="(item, index) in goodList"
				>
					<goods-item
						:name-size="28"
						:img="imgHost + item.commodityPic"
						:img-height="'415rpx'"
						:price="item.sellPrice"
						:orgprice="item.marketPrice"
						:name="item.commodityName"
					></goods-item>
				</navigator>
			</view>
			<!-- </scroll-view> -->
		</mescroll-uni>
	</container>
</template>

<script>
import goodsItem from '../../components/goods-item/goods-item.vue';
import wybTabs from '@/components/wyb-tabs/wyb-tabs.vue';
import container from '@/components/container/container.vue';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
export default {
	mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
	components: {
		wybTabs,
		goodsItem,
		container
	},
	data() {
		return {
			loading: false,
			imgHost: this.$imgHost,
			id: '', //分类id
			type: '', //分类类型 'category' 'column'
			name: '', //分类名
			currentTabIndex: 0,
			currentTab: null, // 当前选中tab
			pageNum: 1, //页码
			pageSize: 10, //每页数量
			total: null, //总数
			orderByColumn: '', //排序的字段
			isAsc: 'asc', //升序或倒序
			tabs: [
				{
					label: '默认',
					val: 'default'
				},
				// {
				// 	label: '销量',
				// 	val:"sellPrice"
				// },
				{
					label: '价格',
					val: 'sellPrice'
				}
			],
			goodList: [
				// {
				// 	author: null
				// 	categoryId: null
				// 	commodityCode: null
				// 	commodityId: 8
				// 	commodityName: "十万个为什么 上册"
				// 	commodityPic: "/profile/upload/afb37c4f-68ae-4411-9c47-b47a5353aa4d.jpg"
				// 	commodityRotationPic: null
				// 	createBy: null
				// 	createTime: null
				// 	freeMailStatus: null
				// 	marketPrice: 100
				// 	orderNum: null
				// 	params: {}
				// 	postage: null
				// 	press: null
				// 	pressDate: null
				// 	remark: null
				// 	searchValue: null
				// 	sellPrice: 100
				// 	status: null
				// 	stock: null
				// 	updateBy: null
				// 	updateTime: null
				// }
			]
		};
	},
	computed: {
		isNodata() {
			return this.goodList.length < 1;
		}
	},
	methods: {
		tabChange(event) {
			this.pageNum = 1; //页码
			this.pageSize = 10; //每页数量
			if(this.mescroll&&this.mescroll.resetUpScroll)
			this.mescroll.resetUpScroll();
			this.currentTabIndex = event.index;
			this.currentTab = this.tabs[event.index];
			if (this.currentTab.val != 'default') this.orderByColumn = this.currentTab.val;
			else this.orderByColumn = '';
			console.log('event', event);
			this.loading = true;
			this.getGoodlist()
				.then(res => {
					this.loading = false;
				})
				.catch(err => {
					this.loading = false;
				});
		},
		init() {
			this.currentTabIndex = 0;
			this.currentTab = null; // 当前选中tab
			this.pageNum = 1; //页码
			this.pageSize = 10; //每页数量
			this.loading = true;
			this.getGoodlist()
				.then(res => {
					this.loading = false;
				})
				.catch(err => {
					this.loading = false;
				});
		},
		downLoad() {
			// 下拉刷新
			console.log('下拉刷新');
			this.pageNum = 1; //页码
			this.pageSize = 10; //每页数量
			this.mescroll.resetUpScroll();
			this.getGoodlist()
				.then(res => {
					// this.mescroll.endSuccess();
				})
				.catch(err => {
					// this.mescroll.endErr();
				});
		},
		upLoad() {
			// 上拉加载
			console.log('上拉加载');

			this.pageNum++;
			this.getGoodlist()
				.then(res => {
					// this.mescroll.endSuccess();
				})
				.catch(err => {
					// this.mescroll.endErr();
				});
		},
		getGoodlist() {
			// 获取商品列表

			console.log('id', this.id);
			if (this.type == 'category')
				return this.$store
					.dispatch('getTypeGoodList', {
						id: this.id,
						pageNum: this.pageNum, //页码
						pageSize: this.pageSize, //每页数量
						orderByColumn: this.orderByColumn, //排序的字段
						isAsc: this.isAsc //升序或倒序
					})
					.then(res => {
						let data = res.data;
						// console.log('获取类目商品列表', data.total);
						this.total = data.total;
						if (this.pageNum == 1) this.goodList = data.rows;
						else this.goodList = [...this.goodList, ...data.rows];
						if (this.total != null && this.pageNum * this.pageSize < this.total) {
							console.log('加载');
							this.mescroll.endSuccess(data.rows.length, true);
						} else {
							console.log('不加载', data.rows.length);
							this.mescroll.endSuccess(data.rows.length, false);
						}
					});
			else if (this.type == 'column')
				return this.$store
					.dispatch('getColumnGoodList', {
						id: this.id,
						pageNum: this.pageNum, //页码
						pageSize: this.pageSize, //每页数量
						orderByColumn: this.orderByColumn, //排序的字段
						isAsc: this.isAsc //升序或倒序
					})
					.then(res => {
						console.log('获取栏目商品列表', res);
						let data = res.data;
						this.total = data.total;
						if (this.pageNum == 1) this.goodList = data.rows;
						else this.goodList = [...this.goodList, ...data.rows];
						if (this.total != null && this.pageNum * this.pageSize < this.total) {
							console.log('加载');
							this.mescroll.endSuccess(data.rows.length, true);
						} else {
							console.log('不加载', data.rows.length);
							this.mescroll.endSuccess(data.rows.length, false);
						}
					});
		}
	},
	onLoad(option) {
		if (option.id) this.id = option.id;
		if (option.type) this.type = option.type;
		if (option.name) this.name = option.name;
		uni.setNavigationBarTitle({
			title: `图书推荐-${option.name}`
		});
		this.init();
	}
	// onPullDownRefresh() {
	// 	console.log('onPullDownRefresh');
	// 	this.init();
	// }
};
</script>

<style lang="scss" scoped>
.goods-type-list {
	width: 100%;
	height: 100%;
	// flex: 1;
	box-sizing: border-box;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	.tabs {
		// padding: 14rpx 0rpx;
		background-color: #fff;
	}
	.scroll {
		// flex: 1;
		height: calc(100% - 80rpx);
	}
	.good-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 20rpx 40rpx;
		.item {
			width: 47.5%;
		}
	}
}
</style>
<style>
/* 修改最外层容器样式 */
/* #ifdef H5 */
.uni-body {
}
uni-page-body {
	height: 100%;
}
/* #endif */

/* #ifdef MP */
page {
	height: 100%;
}
/* #endif */
</style>
